<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>好友管理功能测试</title>
    
    <!-- Bootstrap CSS -->
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
    
    <style>
        body { padding: 20px; }
        .test-section { margin-bottom: 30px; }
        .result { margin-top: 10px; padding: 10px; border-radius: 5px; }
        .success { background-color: #d4edda; border: 1px solid #c3e6cb; }
        .error { background-color: #f8d7da; border: 1px solid #f5c6cb; }
        .info { background-color: #d1ecf1; border: 1px solid #bee5eb; }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="mb-4">好友管理功能测试</h1>
        
        <div class="test-section">
            <h3>1. 基础功能测试</h3>
            <button class="btn btn-primary" onclick="testBasicFunctions()">测试基础功能</button>
            <div id="basicResult" class="result"></div>
        </div>
        
        <div class="test-section">
            <h3>2. 好友列表加载测试</h3>
            <button class="btn btn-success" onclick="testLoadFriends()">测试加载好友列表</button>
            <div id="friendsResult" class="result"></div>
        </div>
        
        <div class="test-section">
            <h3>3. 数据库好友加载测试</h3>
            <button class="btn btn-info" onclick="testLoadFriendsFromDB()">测试从数据库加载</button>
            <div id="dbResult" class="result"></div>
        </div>
        
        <div class="test-section">
            <h3>4. 搜索功能测试</h3>
            <div class="input-group mb-3" style="max-width: 400px;">
                <input type="text" class="form-control" id="searchKeyword" placeholder="输入搜索关键词">
                <button class="btn btn-outline-secondary" onclick="testSearchFriends()">搜索</button>
            </div>
            <div id="searchResult" class="result"></div>
        </div>
        
        <div class="test-section">
            <h3>5. 聊天记录测试</h3>
            <button class="btn btn-warning" onclick="testChatHistory()">测试聊天记录</button>
            <div id="chatResult" class="result"></div>
        </div>
        
        <div class="test-section">
            <h3>6. 消息发送测试</h3>
            <div class="row">
                <div class="col-md-6">
                    <input type="text" class="form-control mb-2" id="testWxid" placeholder="测试wxid" value="test_user">
                    <textarea class="form-control mb-2" id="testMessage" placeholder="测试消息" rows="3">这是一条测试消息</textarea>
                    <button class="btn btn-danger" onclick="testSendMessage()">发送测试消息</button>
                </div>
            </div>
            <div id="sendResult" class="result"></div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <!-- Axios -->
    <script src="{{ url_for('static', filename='js/axios.min.js') }}"></script>
    
    <script>
        // 基础功能测试
        function testBasicFunctions() {
            const result = document.getElementById('basicResult');
            result.innerHTML = '<div class="info">正在测试基础功能...</div>';
            
            // 测试Bootstrap Icons
            const iconTest = document.createElement('i');
            iconTest.className = 'bi bi-person-lines-fill';
            const iconWorks = iconTest.offsetWidth > 0;
            
            // 测试Bootstrap JS
            const bootstrapWorks = typeof bootstrap !== 'undefined';
            
            // 测试Axios
            const axiosWorks = typeof axios !== 'undefined';
            
            let html = '<div class="success">';
            html += '<h5>基础功能测试结果：</h5>';
            html += `<p>✅ Bootstrap Icons: ${iconWorks ? '正常' : '异常'}</p>`;
            html += `<p>✅ Bootstrap JS: ${bootstrapWorks ? '正常' : '异常'}</p>`;
            html += `<p>✅ Axios: ${axiosWorks ? '正常' : '异常'}</p>`;
            html += '</div>';
            
            result.innerHTML = html;
        }
        
        // 测试加载好友列表
        function testLoadFriends() {
            const result = document.getElementById('friendsResult');
            result.innerHTML = '<div class="info">正在加载好友列表...</div>';
            
            axios.get('/api/friends')
                .then(response => {
                    const data = response.data;
                    if (data.success) {
                        const friends = data.data;
                        let html = '<div class="success">';
                        html += `<h5>✅ 好友列表加载成功 (${friends.length} 个好友)</h5>`;
                        html += '<ul>';
                        friends.slice(0, 5).forEach(friend => {
                            html += `<li>${friend.nickname || friend.wxid} (${friend.wxid})</li>`;
                        });
                        if (friends.length > 5) {
                            html += `<li>... 还有 ${friends.length - 5} 个好友</li>`;
                        }
                        html += '</ul>';
                        html += '</div>';
                        result.innerHTML = html;
                    } else {
                        result.innerHTML = `<div class="error">❌ 加载失败: ${data.message}</div>`;
                    }
                })
                .catch(error => {
                    result.innerHTML = `<div class="error">❌ 请求失败: ${error.message}</div>`;
                });
        }
        
        // 测试从数据库加载好友
        function testLoadFriendsFromDB() {
            const result = document.getElementById('dbResult');
            result.innerHTML = '<div class="info">正在从数据库加载好友...</div>';
            
            axios.get('/api/friends/list')
                .then(response => {
                    const data = response.data;
                    if (data.success) {
                        const friends = data.data;
                        let html = '<div class="success">';
                        html += `<h5>✅ 数据库好友加载成功 (${friends.length} 个好友)</h5>`;
                        html += '<ul>';
                        friends.slice(0, 5).forEach(friend => {
                            html += `<li>${friend.nickname || friend.wxid} (${friend.wxid})</li>`;
                        });
                        if (friends.length > 5) {
                            html += `<li>... 还有 ${friends.length - 5} 个好友</li>`;
                        }
                        html += '</ul>';
                        html += '</div>';
                        result.innerHTML = html;
                    } else {
                        result.innerHTML = `<div class="error">❌ 加载失败: ${data.message}</div>`;
                    }
                })
                .catch(error => {
                    result.innerHTML = `<div class="error">❌ 请求失败: ${error.message}</div>`;
                });
        }
        
        // 测试搜索好友
        function testSearchFriends() {
            const keyword = document.getElementById('searchKeyword').value.trim();
            if (!keyword) {
                document.getElementById('searchResult').innerHTML = '<div class="error">请输入搜索关键词</div>';
                return;
            }
            
            const result = document.getElementById('searchResult');
            result.innerHTML = '<div class="info">正在搜索好友...</div>';
            
            axios.get(`/api/friends/search?keyword=${encodeURIComponent(keyword)}`)
                .then(response => {
                    const data = response.data;
                    if (data.success) {
                        const friends = data.data;
                        let html = '<div class="success">';
                        html += `<h5>✅ 搜索成功 (找到 ${friends.length} 个好友)</h5>`;
                        if (friends.length > 0) {
                            html += '<ul>';
                            friends.forEach(friend => {
                                html += `<li>${friend.nickname || friend.wxid} (${friend.wxid})</li>`;
                            });
                            html += '</ul>';
                        }
                        html += '</div>';
                        result.innerHTML = html;
                    } else {
                        result.innerHTML = `<div class="error">❌ 搜索失败: ${data.message}</div>`;
                    }
                })
                .catch(error => {
                    result.innerHTML = `<div class="error">❌ 请求失败: ${error.message}</div>`;
                });
        }
        
        // 测试聊天记录
        function testChatHistory() {
            const result = document.getElementById('chatResult');
            result.innerHTML = '<div class="info">正在获取聊天记录...</div>';
            
            axios.get('/api/chat/history')
                .then(response => {
                    const data = response.data;
                    if (data.success) {
                        const records = data.data;
                        let html = '<div class="success">';
                        html += `<h5>✅ 聊天记录获取成功 (${records.length} 条记录)</h5>`;
                        if (records.length > 0) {
                            html += '<ul>';
                            records.slice(0, 5).forEach(record => {
                                const time = new Date(record.timestamp).toLocaleString();
                                html += `<li>${time} - ${record.sender_wxid} -> ${record.from_wxid}</li>`;
                            });
                            if (records.length > 5) {
                                html += `<li>... 还有 ${records.length - 5} 条记录</li>`;
                            }
                            html += '</ul>';
                        }
                        html += '</div>';
                        result.innerHTML = html;
                    } else {
                        result.innerHTML = `<div class="error">❌ 获取失败: ${data.message}</div>`;
                    }
                })
                .catch(error => {
                    result.innerHTML = `<div class="error">❌ 请求失败: ${error.message}</div>`;
                });
        }
        
        // 测试发送消息
        function testSendMessage() {
            const wxid = document.getElementById('testWxid').value.trim();
            const message = document.getElementById('testMessage').value.trim();
            
            if (!wxid || !message) {
                document.getElementById('sendResult').innerHTML = '<div class="error">请填写完整的消息信息</div>';
                return;
            }
            
            const result = document.getElementById('sendResult');
            result.innerHTML = '<div class="info">正在发送消息...</div>';
            
            axios.post('/api/message/send', {
                to_wxid: wxid,
                content: message,
                at_users: ""
            })
                .then(response => {
                    const data = response.data;
                    if (data.success) {
                        result.innerHTML = '<div class="success">✅ 消息发送成功</div>';
                    } else {
                        result.innerHTML = `<div class="error">❌ 发送失败: ${data.message}</div>`;
                    }
                })
                .catch(error => {
                    result.innerHTML = `<div class="error">❌ 请求失败: ${error.message}</div>`;
                });
        }
        
        // 页面加载时自动测试基础功能
        document.addEventListener('DOMContentLoaded', function() {
            testBasicFunctions();
        });
    </script>
</body>
</html> 